{% extends "management/base.html" %}
{% block title %}添加图书{% endblock %}

{% block content %}

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">

                <!-- 成功提示 -->
                {% if state == 'success' %}
                    <div class="alert alert-success text-center mb-4" role="alert">
                        <h4 class="mb-0">✅ 添加成功</h4>
                    </div>
                {% endif %}

                <!-- 添加图书表单 -->
                <form method="POST" novalidate>
                    {% csrf_token %}

                    <h2 class="text-center mb-4">添加图书</h2>

                    <!-- 书名 -->
                    <div class="mb-3">
                        <label for="id_name" class="form-label">书名</label>
                        <input type="text"
                               class="form-control"
                               id="id_name"
                               name="name"
                               placeholder="请输入书名"
                               required
                               autofocus>
                        <div class="invalid-feedback">请填写书名</div>
                    </div>

                    <!-- 作者 -->
                    <div class="mb-3">
                        <label for="id_author" class="form-label">作者</label>
                        <input type="text"
                               class="form-control"
                               id="id_author"
                               name="author"
                               placeholder="请输入作者"
                               required>
                        <div class="invalid-feedback">请填写作者</div>
                    </div>

                    <!-- 类型 -->
                    <div class="mb-3">
                        <label for="id_category" class="form-label">类型</label>
                        <input type="text"
                               class="form-control"
                               id="id_category"
                               name="category"
                               placeholder="例如：小说、科技、历史"
                               required>
                        <div class="invalid-feedback">请填写图书类型</div>
                    </div>

                    <!-- 价格 -->
                    <div class="mb-3">
                        <label for="id_price" class="form-label">价格（元）</label>
                        <input type="number"
                               class="form-control"
                               id="id_price"
                               name="price"
                               placeholder="0.00"
                               step="0.01"
                               min="0"
                               required>
                        <div class="invalid-feedback">请输入有效价格</div>
                    </div>

                    <!-- 出版日期 -->
                    <div class="mb-3">
                        <label for="id_pubdate" class="form-label">出版日期</label>
                        <input type="date"
                               class="form-control"
                               id="id_pubdate"
                               name="publish_date"
                               required>
                        <div class="invalid-feedback">请选择出版日期</div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="d-grid gap-2 mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            提交
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>

    <!-- 可选：添加前端校验脚本 -->
    <script>
        // Bootstrap 5 表单验证
        (function () {
            'use strict'
            const forms = document.querySelectorAll('form')
            Array.from(forms)
                .forEach(form => {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }
                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>

{% endblock %}